<template>
	<div>
		<div v-show="showMark" ref="coords">
			<div ref="top" class="line top horizontal"></div>
			<div ref="right" class="line right vertical"></div>
			<div ref="bottom" class="line bottom horizontal"></div>
			<div ref="left" class="line left vertical"></div>			
		</div>
		<div ref="masks">
		</div>
	</div>
</template>
<script type="text/javascript">
	import MarkService from './service/mark.service.js';
	export default{
		name: 'Mark',

		data: function(){
			return {
				stopMark: false,
				showMark: true,
				masks: []
			};

		},

		methods: {
			showCtxOpt: function(event){
				let self = this;
				self.$bus.$emit('context-event', {from:'mask', event: event});

			},

			handleMouseEvt: function(evtMsg){
				let self = this;
				let event = evtMsg.event;
				let target = evtMsg.event.target;
				if(self.stopMark || !event.type.startsWith('mouse')){
					return;
				}
				if(self.$root.$el.contains(target) && 
					(self.$refs.coords.contains(target) || !self.$refs.masks.contains(target))){
					return;
				}

				self.showMarkLine(target);

			},

			showMarkLine: function(target){
				let self = this;
				if(null == target.getBoundingClientRect){
					return;
				}
				let boundingRect = target.getBoundingClientRect();
				self.$refs.top.style.top = boundingRect.top + 'px';
				self.$refs.right.style.left = boundingRect.right + 'px';
				self.$refs.bottom.style.top = boundingRect.bottom + 'px';
				self.$refs.left.style.left = boundingRect.left + 'px';
				self.lastTarget = target;
				self.showMark = true;
			
			},

			handleMenuEvt: function(evtMsg){
				let self = this;
				let menu = evtMsg.menu;
				let element = evtMsg.element;
				if('stopMoveMark' == menu.name){
					self.stopMark = !self.stopMark;
					return;
				}
				if('addScrapeElement' == menu.name){
					self.handleScrapeEvt(evtMsg);
					return;
				}

			},

			handleScrapeEvt: function(evtMsg){
				let self = this;
				let element = evtMsg.element;
				// self.masks.push({element: element});
				// let computedStyle = window.getComputedStyle(element, 'before');
				// let maskStyle = document.getElementById('maskStyle');
				// let styleString = ".scrape-element-data::before{ content: '' !important; background: #ff4444b8 !important; width: 100% !important; height: 100% !important; top: 0px !important; border: 0px !important; border-radius: 0px !important; left: 0px !important; padding: 0px !important;}";
				// if(null == maskStyle){
				// 	maskStyle = document.createElement('style');
				// 	maskStyle.id = 'maskStyle';
				// 	maskStyle.textContent = styleString;
				// 	document.head.append(maskStyle);
				// }
				
				// element.classList.add('scrape-element-data');

			},

			getMaskBoundingRect: function(element){
				let self = this;
				let scrollTop = self.foundScrollTop(element);
				let scrollLeft = element.scrollLeft || document.documentElement.scrollLeft || document.body.scrollLeft;
				let boundingRect = element.getBoundingClientRect();
				let computedStyle = window.getComputedStyle(element);
				return {
					top: (boundingRect.top + scrollTop) + 'px',
					left: (boundingRect.left + scrollLeft) + 'px',
					width: boundingRect.width + 'px',
					height: boundingRect.height + 'px'
				};

			},

			foundScrollTop: function(element){
				// let parent = element;
				// while(parent.tagName != 'HTML'){
				// 	parent = element.parentElement;
				// 	if(parent.scrollTop != 0){
				// 		return parent.scrollTop;
				// 	}
				// }
				return document.documentElement.scrollTop || document.body.scrollTop;

			}

		},

		computed: {
			maskStyle: function(){
				return {
					content: '',
					background: 'red'
				};

			}

		},
		
		mounted: function() {
			let self = this;
			let markService = new MarkService(self);
			self.markService = markService;
			self.$bus.$on('mouse-event', evtMsg => self.handleMouseEvt(evtMsg));
			self.$bus.$on('menu-event', evtMsg => self.handleMenuEvt(evtMsg));
			self.$bus.$on('snapshot-event', evtMsg => markService.handleSnapshotEvt(self, evtMsg));

		}

	}
</script>
<style type="text/css" scoped>
	.line{
		position: fixed; 
		padding: 0px;
		margin: 0px;
		z-index: calc(var(--base-layer) + 1);
	}
	.horizontal{
		left: 0px;
		width:100%; 
		height: 0px; 
	}
	.vertical{
		top: 0px;
		width: 0px; 
		height: 100%; 
	}
	.top{
		border-top: dashed 0.5px red;
	}
	.left{
		border-left: dashed 0.5px red;
	}
	.bottom{
		border-bottom: solid 0.5px red;
	}
	.right{
		border-right: solid 0.5px red;
	}
	.mask{
		position: absolute;
		z-index: calc(var(--base-layer) + 1);
		background: #ff000066;
	}
</style>